<!--流程表单小组件-->
<template>
<!-- :maskClosable="drawMaskClosable" -->
  <a-drawer
    title="以起草人身份操作"
    placement="right"
    :width="576"
    :visible="true"
    :body-style="{ paddingBottom: '80px' }"
    @close="closeApplyCompletes"
  >
    <div class="bottomDescribe">
      <div class="topContent">
        <div class="leftTitle">
          常用意见：
        </div>
        <div class="rightContent">
          <div class="selectConetnt">
            <a-select v-model="selectDefaultValue" style="width: 100%;margin-right: 15px;" @change="handleChanges">
              <a-select-option v-for="(item, index) in selectDatas" :key="index" :value="item">
                {{ item }}
              </a-select-option>
            </a-select>
          </div>
          <div class="custom">
            <a-button @click="showModals">自定义</a-button>
            <a-modal v-model="modalVisibles" title="自定义处理意见" centered @cancel="handleOkss" v-if="modalVisibles">
              <div style="margin-bottom: 1.5vh">自定义常用处理意见（每行一个）</div>
              <a-textarea
                style="width: 50vw"
                v-model="modalAreaValues"
                placeholder="请输入"
                :auto-size="{ minRows: 8, maxRows: 8 }"
              />
              <template slot="footer">
                <a-row>
                  <a-col :span="14" class="sync-content"
                         style="font-size: 14px;color: #386BD7;display: flex;justify-content: flex-start;align-items: center;padding: 8px">
                  </a-col>
                  <a-col :span="10" style="padding-right: 18px">
                    <a-button @click="handleOkss">取消</a-button>
                    <a-button type="primary" @click="onSubmits">确定</a-button>
                  </a-col>
                </a-row>
              </template>
            </a-modal>
          </div>
        </div>
      </div>
      <div class="topContent">
        <div class="leftTitle">
          提出人：
        </div>
        <div class="rightContent">
          <a-radio-group v-model="radioValue">
            <a-radio v-for="(item, index) in radioData" :key="index" :value="item.routing">
              {{ item.lable }}
            </a-radio>
          </a-radio-group>
        </div>
      </div>
      <div class="topContent">
        <div class="leftTitle">
          处理意见：
        </div>
        <div class="rightContent">
          <div class="textArae">
            <a-textarea
              v-model="textAreaValueInputs"
              placeholder="请输入"
              :rows="4" style="width: 100%"
            />
          </div>
        </div>
      </div>
    </div>
    <div
      :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
    >
      <a-button :style="{ marginRight: '8px' }" @click="closeApplyCompletes">
        取消
      </a-button>
      <a-button type="primary" @click="commitApplyComplete">
        确认
      </a-button>
    </div>
  </a-drawer>
</template>
<script>
import {getCustomizeOpinions, putCustomizeOpinions, userinfo} from "@api/middleGround";
import { creatorMake, } from '@/api/taskBook';
import _ from "lodash"
export default {
  name: 'bottomDescribe',
  data() {
    return {
      radioValue: null,
      modalVisibles: false,
      modalAreaValues: '',
      selectDefaultValue: '请选择',
      selectDatas: [],//下拉框数
      textAreaValueInputs: ''
    }
  },
  props: {
    radioData: { // 单选框数据
      type: Array,
      default: () => [
        {
          routing: '撤回',
          lable: '撤回'
        },
        {
          routing: '废弃',
          lable: '废弃'
        }
      ]
    },
    submitBtn: {
      type: Boolean,
      default: false,
    },
    drawMaskClosable: {
      type: Boolean,
      default: false
    },//点击蒙层是否允许关闭
    reviewId: {
      type: String,
      default: ''
    },
  },
  mounted() {
    this.getCustomizeOpinionsDatas()
  },
  methods: {
    //关闭抽屉
    closeApplyCompletes() {
      this.$emit('closeDraws')
    },
    handleChanges(val) { // 点击下拉框
      this.textAreaValueInputs = val
    },
    showModals() {
      this.modalVisibles = true;
    },
    handleOkss(e) {
      this.modalVisibles = false;
    },
    onSubmits() {
      if (this.modalAreaValues == '') {
        this.$message.error('请输入意见！')
      } else {
        let parms = {
            "opinion": _.replace(this.modalAreaValues, /\r\n|\n|\r/g, ','),
            "userId": userinfo.loginName
        }
        putCustomizeOpinions(parms).then(results => {
          if (results.status === 200 && results.data) {
            this.modalVisibles = false;
            this.getCustomizeOpinionsDatas()//刷新自定义意见
            this.$message.success('设置自定义意见成功！')
          } else {
            this.$message.error('设置自定义意见失败！')
          }
        })
      }
    },
    //获取自定义审核意见
    getCustomizeOpinionsDatas() {
      let parms = {
        "userId": userinfo.loginName
      }
      getCustomizeOpinions(parms).then(results => {
        if (results.status === 200 && results.data) {
          if (results.data.opinion.length > 0) {
            this.selectDatas = results.data.opinion.split(',')
            this.modalAreaValues = _.replace(this.selectDatas.toString(), /,/g, '\r\n')
          } else {
            this.selectDatas = []
            this.modalAreaValues = ''
          }
        } else {
          this.$message.error('获取自定义意见失败！')
        }
      })
    },
    //完成提交
    commitApplyComplete() {
      let params = {
        oid: this.reviewId,
        userId: userinfo.loginName,
        comment: this.textAreaValueInputs,
        routeChoice: this.radioValue,
      }
      creatorMake(params).then(results=>{
        if(results.status === 200){
          if(results.data.success){
            this.$message.success('操作成功')
            this.$emit("commitApplyComplete")
            setTimeout(this.init(), 3000)
          }
        }
      })
      this.visible = false
    },
  }
}
</script>
<style lang="less" scoped>
.bottomDescribe {
  .topContent {
    .leftTitle {
      width: 90px;
      padding: 0px 0px 10px 0px;
    }
    .rightContent {
      width: 100%;
      padding: 0px 0px 10px 0px;
      display: flex;
      justify-content: flex-start;
      .selectConetnt {
        width: 100%;
        margin-right: 10px;
      }
      /deep/ .ant-radio-group {
        .ant-radio-wrapper {
          margin-right: 1vw;
          span.ant-radio + * {
            padding-right: 8px;
            padding-left: 4px;
          }
        }
      }
      .textArae {
        width:100%;
        .submit {
          margin-top: 10px;
          width: 170px;
          color: #fff;
          padding: 0px;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>